<template>
    <div>
        <!--tab-->
        <Tabcomponent></Tabcomponent>
        <div class="productlist">
            <div class="head"><span>女士/服饰/</span><span>上衣（1880件）</span></div>
            <div class="make">
                <div class="make-box" v-on:mousedown="draganddrop($event)">
                    <div :class="selectindex==index?'select':''" v-for="(item,index) in 20" :key="index" @click="clickselectitem(index)">
                        <div :class="selectindex==index?'select':''">
                            Palm Angeles
                        </div>
                    </div>
                </div>
            </div>
            <div class="sort">
                <div class="sort-left">
                    <el-row class="tac">
                        <el-col :span="24">
                            <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose">
                                <el-submenu index="1">
                                    <template slot="title">
                                        <span>{{$t('langs.Shopping.category')}}</span>
                                        <span class="iconfont icon-tianjia" ></span>
                                    </template>
                                    <el-menu-item index="1-1" v-for="(item,index) in sortlist" :key="index" @click="sortsort(index)">
                                        <div :class="sortindex==index?'div sortclick':'div'"><i v-if="sortindex==index"></i></div>
                                        {{item}}
                                    </el-menu-item>
                                </el-submenu>
                                <div class="condition">
                                    <p>{{$t('langs.Shopping.filter')}}</p>
                                    <ul>
                                        <li><span class="iconfont icon-htmal5icon21"></span>分类：长袖上衣</li>
                                    </ul>
                                </div>
                                <el-submenu index="2">
                                    <template slot="title">
                                        <span>{{$t('langs.Shopping.prics')}}</span>
                                        <span class="iconfont icon-tianjia" ></span>
                                    </template>
                                    <el-menu-item index="1-1">
                                        <div class="price">
                                            <input type="text" placeholder="￥">
                                            <span> - </span>
                                            <input type="text" name="" id="" placeholder="￥">
                                            <button>确定</button>
                                        </div>
                                    </el-menu-item>
                                </el-submenu>
                                <el-submenu index="3">
                                    <template slot="title">
                                        <span>{{$t('langs.Shopping.size')}}</span>
                                        <span class="iconfont icon-tianjia" ></span>
                                    </template>
                                    <el-menu-item index="1-1" style="height: 200px;">
                                        <div class="size" >
                                            <div v-for="(item,index) in 8" :key="index">
                                                <span>XXS</span>
                                            </div>
                                        </div>
                                    </el-menu-item>
                                </el-submenu>
                                    <el-submenu index="4">
                                    <template slot="title">
                                        <span>{{$t('langs.Shopping.colour')}}</span>
                                        <span class="iconfont icon-tianjia" ></span>
                                    </template>
                                    <el-menu-item index="1-1"  style="height: 200px;">
                                        <div class="colour">
                                            <div v-for="(item,index) in 8" :key="index">
                                                <span style="background: red;"></span>
                                                <span>蓝色</span>
                                            </div>
                                        </div>
                                    </el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
                <div class="sort-rigth">
                    <div class="commodity">
                        <div class="commodity-item" v-for="(item,index) in 20 " :key="index" @click="toproductdetails">
                            <img src="../assets/img/0FB.png" alt="">
                            <div>AHUIGGH</div>
                            <div>DUUIS 褶皱时尚手提包</div>
                            <div>￥8, 000</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Tabcomponent from '@/components/Tabcomponent.vue'

export default {
    components: {
        Tabcomponent,
        
    },
    data() {
        return {
            selectindex: 0,
            clientX: null,
            clientshow: false,
            x: null,
            sortlist:['男士','女士','儿童','其他'],
            sortindex: 0,
            sortstyle: null,
            sortindex1: null
        }
    },
    methods: {
        clickselectitem(i) {
            this.selectindex = i
        },
        draganddrop(e) {

            let odiv = e.target;
            let disX = e.clientX - odiv.offsetLeft;
            document.onmousemove = (e)=>{ //鼠标按下并移动的事件
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;   
                //绑定元素位置到positionX和positionY上面
                this.positionY = left
                //移动当前元素
                odiv.style.left = left + 'px';
            }
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        },
        sortsort(i) {
            this.sortindex =i
        },
        toproductdetails() {
            this.$router.push({
                path: '/productdetails'
            })
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }

    },
    mounted() {
    },
}
</script>

<style lang="scss">
.productlist {
    width: 1041px;
    padding-top: 165px;
    .head {
        padding: 50px 0 30px 0;
        font-size: 14px;
        >span:nth-child(1) {
            font-weight: 600;
        }
    }
    .make {
        height: 39px;
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
  
        >div {
            height: 39px;
            position: absolute;
            top: 0;
            >div {
                display: flex;
                display: inline-block;
                padding: 7px 8px;
                margin: 0 6px;
                >div {
                    font-size: 12px;
                    color: #636363;
                    padding: 4px 7px;
                    background: #f5f5f5;
                }
            }
        }
    }
    .sort {
        border-top: 1px solid #F0F0F0;
        overflow: hidden;
        >div {
            float: left;
        }
        >.sort-left {
            width: 217px;
            padding-top: 17px;
            height: 100%;
        }
        >.sort-rigth {
            width: 820px;
            .commodity {
                padding-left: 19px;
                overflow: hidden;
                >.commodity-item {
                    float: left;
                    margin-right: 38px;
                    width: 227px;
                    padding: 33px 0 20px 0;
                    >img {
                        width: 197px;
                        height: 197px;
                        vertical-align: top;
                    }
                    >div {
                        font-size: 14px;
                        padding-left: 15px;
                    }
                    >div:nth-child(2) {
                        font-weight: 800;
                        margin: 27px 0 12px 0;
                    }
                    >div:nth-child(3) {
                        margin-bottom: 12px;
                    }
                }
            } 
        } 
    }
}
.condition {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 13px 0 20px 4px;
    >p {
        padding: 20px 0;
    }
    >ul {
        >li {
            font-size: 14px;
            color: #AFB1B8;
            line-height: 30px;
            font-weight: 600;
            position: relative;
            padding-left: 30px;
            >span {
                position: absolute;
                left: 0;
            }
        }
    }
}
.sortclick {
    border-color: #000 !important;
}
.select {
    background: #000 !important;
    color: #fff !important;
}
.el-submenu__title i {
    display: none;
}
.el-menu {
    border-right: none;
}
.el-submenu__title {
    padding-left: 0 !important;
    font-size: 16px;
    position: relative;
    >span:nth-child(2) {
        font-size: 14px;
        font-weight: 400;
        position: absolute;
        right: 60px;
    }
}
.el-menu-item {
    padding-left: 30px !important;
    font-size: 14px;
    color: #000;
    line-height: 36px;
    font-weight: 400;
    position: relative;
    >.div{
        width: 16px;
        height: 16px;
        border: 2px solid #eaeaea;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 15px;
        >i {
            display: inline-block;
            width: 6px;
            height: 6px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -3px;
            margin-top: -3px;
        }
    }
    >.price {
        width: 100%;
        border: none;
        padding-left: 10px;
        margin-bottom: 20px;
        position: absolute;
        top: 0;
        left: 0;
        >input {
            width: 52px;
            height: 20px;
            border-bottom: 1px solid #ccc;
            padding: 3px;
            outline: none;
        }
        >button {
            height: 26px;
            width: 52px;
            margin-left: 10px;
            background: #000;
            color: #fff;
            outline: none;
            cursor: pointer;
        }
    }
    .size {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        left: 0;
        >div {
            width: 47px;
            border: 1px solid #e6e6e6;
            height: 30px;
            position: relative;
            border-radius: 2px;
            float: left;
            margin: 6px;
            >span:nth-child(1) {
                font-size: 14px;
                line-height: 20px;
                color: #636363;
                position: absolute;
                top: 6px;
                left: 10px;
            }
        }
        border: none;
    }
    .colour {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        left: 0;
        >div {
            width: 60px;
            border: 1px solid #e6e6e6;
            height: 30px;
            position: relative;
            border-radius: 2px;
            float: left;
            margin: 4px;
            line-height: 30px;
            text-align: center;
            >span:nth-child(1) {
                display: inline-block;
                width: 20px;
                height: 20px;
                
            }
            >span:nth-child(2) {
                font-size: 12px;
                line-height: 20px;
                color: #636363;;
            }
        }
    }
}
.el-menu-item.is-active {
    color: #000;
}
.el-menu-item:focus, .el-menu-item:hover {
    background-color: #fff;
}
</style>